<template>
  <!-- 渲染区域 -->
  <component
    v-if="type"
    :is="compMap[type]"
    :src="realSrc"
    style="height: 100vh"
    @rendered="$emit('rendered')"
    @error="onError"
  />
  <div v-else-if="ext === 'doc'" class="tip">
    暂不支持 .doc 格式，请将文件另存为 <b>.docx</b> 后重新上传。
  </div>
  <!-- 其它未知格式 -->
  <div v-else class="tip">暂不支持 {{ ext }} 格式预览</div>
</template>

<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePptx from "@vue-office/pptx";
import "@vue-office/docx/lib/index.css";

/* 判断是否为完整外链 */
function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

export default {
  name: "OfficeViewer",
  components: { VueOfficePdf, VueOfficeDocx, VueOfficePptx },
  props: {
    src: { type: String, required: true }, // 支持相对路径、逗号分隔、完整外链
  },
  computed: {
    /* 取第 1 段并去掉逗号后面多余参数 */
    rawSrc() {
      if (!this.src) return "";
      return this.src.split(",")[0];
    },
    /* 拼成完整地址 */
    realSrc() {
      if (isExternal(this.rawSrc)) return this.rawSrc;
      // process.env.VUE_APP_BASE_API 就是你 axios 的 baseURL
      return (process.env.VUE_APP_BASE_API || "") + this.rawSrc;
    },
    /* 文件后缀 */
    ext() {
      const tmp = this.rawSrc.split(/[#?]/)[0];
      return tmp.substring(tmp.lastIndexOf(".") + 1).toLowerCase();
    },
    /* 合法类型 */
    type() {
      return ["pdf", "docx", "pptx"].includes(this.ext) ? this.ext : "";
    },
    /* 动态组件映射 */
    compMap() {
      return {
        pdf: "vue-office-pdf",
        docx: "vue-office-docx",
        pptx: "vue-office-pptx",
      };
    },
  },
  methods: {
    onError(err) {
      console.error("OfficeViewer 渲染失败", err);
      this.$emit("error", err);
    },
  },
};
</script>

<style scoped>
.tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 18px;
  color: #999;
}
</style>
